<template>
  <div
    class="fdx-nav-tab-item tab-item"
    @click="selectedItem"
    :class="['fdx-nav-tab-item-' + id, $parent.value === id ? selectedClass : '']"
  >
    <div class="item-icon">
      <slot name="icon"></slot>
    </div>
    <div class="item-text">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav-tab-item',
  props: {
    id: {
      type: [String, Number],
      default: '0'
    },
    selectedClass: {
        type: String,
        default: 'active'
    }
  },
  methods: {
    selectedItem: function() {
      this.$parent.$emit('input', parseInt(this.id))
      this.$nextTick(() => {
        this.$parent.$emit('click', this.id)
      })
    }
  }
}
</script>
<style lang="scss"></style>
